'use strict';
goog.provide('Blockly.FieldDropdownWithButtons');

goog.require('Blockly.DropDownDiv');
goog.require('Blockly.FieldDropdown');
goog.require('goog.userAgent');

/**
 * Custom field dropdown with additional buttons.
 * @param {Array} options The options for the dropdown.
 * @constructor
 * @extends {ScratchBlocks.FieldDropdown}
 */

Blockly.FieldDropdownWithButtons = function(options) {
  Blockly.FieldDropdownWithButtons.superClass_.constructor.call(this, options);
};
goog.inherits(Blockly.FieldDropdownWithButtons, Blockly.FieldDropdown);

/**
 * Create the dropdown menu.
 * @return {Element} The dropdown menu element.
 */

Blockly.FieldDropdownWithButtons.prototype.init = function() {
  // Call parent init
  Blockly.FieldDropdownWithButtons.superClass_.init.call(this);

  // Create button elements
  var buttonContainer = document.createElement('div');
  buttonContainer.className = 'dropdown-buttons';

  var button1 = document.createElement('button');
  button1.textContent = 'Button 1';
  button1.onclick = function() {
    alert('Button 1 clicked');
  };

  var button2 = document.createElement('button');
  button2.textContent = 'Button 2';
  button2.onclick = function() {
    alert('Button 2 clicked');
  };

  buttonContainer.appendChild(button1);
  buttonContainer.appendChild(button2);

  // Append buttons to the dropdown
  this.dropdownMenu_.appendChild(buttonContainer);
};

/**
 * Set the HTML structure for the dropdown.
 */

Blockly.FieldDropdownWithButtons.prototype.getDropdownHtml_ = function() {
  var html = Blockly.FieldDropdownWithButtons.superClass_.getDropdownHtml_.call(this);
  return html;
};

Blockly.FieldDropdownWithButtons.fromJson = function(json) {
  console.log(333,json['options'])

  return new Blockly.FieldImageDropdown(
    json['options'], 
  );
};

Blockly.Field.register('field_dropdown_with_buttons', Blockly.FieldDropdownWithButtons);

